<template>
    <swiper ref="mySwiper" :options="swiperOptions">
    <swiper-slide>
         <Panel icon="./img/title/3.png" title="维修过程质量监控" @click.native="changePage(1)" :class="page==1?'active':''">
               <div class="repair">
                   <div>
                      <countTo :startVal="0" :endVal="50" :duration="5000" />
                      <p>接入企业数</p>
                   </div>
                   <div>
                      <countTo :startVal="0" :endVal="300" :duration="5000" />
                      <p>累计维修次数</p>
                   </div>
               </div>
         </Panel>
    </swiper-slide>
    <swiper-slide>
         <Panel icon="./img/title/3.png" title="尾气治理" @click.native="changePage(2)" :class="page==2?'active':''">
               <div class="repair">
                   <div>
                      <countTo :startVal="0" :endVal="10" :duration="5000" />
                      <p>接入企业数</p>
                   </div>
                   <div>
                      <countTo :startVal="0" :endVal="200" :duration="5000" />
                      <p>累计治理次数</p>
                   </div>
               </div>
         </Panel>
    </swiper-slide>
    <swiper-slide>
         <Panel icon="./img/title/3.png" title="综合性能检测" @click.native="changePage(3)" :class="page==3?'active':''">
               <div class="repair">
                   <div>
                      <countTo :startVal="0" :endVal="50" :duration="5000" />
                      <p>接入企业数</p>
                   </div>
                   <div>
                      <countTo :startVal="0" :endVal="2200" :duration="5000" />
                      <p>累计检测次数</p>
                   </div>
               </div>
         </Panel>
    </swiper-slide>
    <swiper-slide>
         <Panel icon="./img/title/3.png" title="源头治超" @click.native="changePage(4)" :class="page==4?'active':''">
               <div class="repair">
                   <div>
                      <countTo :startVal="0" :endVal="68" :duration="5000" />
                      <p>接入企业数</p>
                   </div>
                    <div>
                      <countTo :startVal="0" :endVal="220" :duration="5000" />
                      <p>重点源头数</p>
                   </div>
               </div>
         </Panel>
    </swiper-slide>
    <swiper-slide>
         <Panel icon="./img/title/3.png" title="车辆主动防控" @click.native="changePage(5)" :class="page==5?'active':''">
               <div class="repair">
                   <div>
                      <countTo :startVal="0" :endVal="8" :duration="5000" />
                      <p>接入车辆数</p>
                   </div>
                    <div>
                      <countTo :startVal="0" :endVal="150" :duration="5000" />
                      <p>累计预警数</p>
                   </div>
               </div>
         </Panel>
    </swiper-slide>
    <swiper-slide>
        <Panel icon="./img/title/3.png" title="道路运输企业平台" @click.native="changePage(6)" :class="page==6?'active':''">
               <div class="repair">
                   <div>
                      <countTo :startVal="0" :endVal="70" :duration="5000" />
                      <p>接入企业数</p>
                   </div>
                    <div>
                      <countTo :startVal="0" :endVal="2550" :duration="5000" />
                      <p>服务车辆数</p>
                   </div>
               </div>
         </Panel>
    </swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
</template>
<script>
import types from '@/store/constants/types'
import countTo from "vue-count-to";
  export default {
    name: 'carrousel',
    data() {
      return {
        swiperOptions: {
           pagination: {
            el: '.swiper-pagination'
          },
          slidesPerView: 5,
          spaceBetween: 30,
          freeMode: false,
          autoplay: {
            delay: 3000,
            stopOnLastSlide: false,
            disableOnInteraction: true,
          }
         },
         page:4
      }
    },
    components:{
    countTo
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.$swiper
      }
    },  
    mounted() {
      // this.swiper.slideTo(3, 3000, false)
    },
   methods:{
        changePage(page){
           this.page=page
           this.$store.commit(types.SET_HOME_PAGE, page)
        }
    }
  }
</script>
<style lang="less" scoped>
.swiper-container{
   width:100vw;
   margin:0;
   padding: 5px 10px 20px 10px;
    .swiper-wrapper{
         width:20%!important;
    }
   .swiper-slide{
       width:20%!important;
       box-sizing:border-box;
       padding:0 10px;
       margin:0!important;
   }
   .repair{
       width:100%;
       height:100%;
       margin:0;
       padding:0;
       font-size:16px;
       display:flex;
       justify-content: space-around;
       align-content: center;
       div{
           text-align:center;
            font-size: 14px;
           color: rgb(106, 159, 250);
           display: flex;
           flex-direction: column;
           justify-content: center;
       }
       span{
           font-size: 24px;
           color: #f0ca61;
           margin-bottom:5px;
       }
   }
}
</style>